import { useState, forwardRef, useImperativeHandle } from "react";
import { Modal, Table } from "antd";
import type { ColumnsType } from "antd/es/table";
import type { fillType } from "@/types/index";

const columns: ColumnsType<fillType> = [
  { title: "序号", dataIndex: "xh", align: "center", width: "100px" },
  { title: "答案文本", dataIndex: "count", align: "center" }
];

export default forwardRef(function CheckText(_, ref) {
  const [checkShow, setCheckShow] = useState(false);
  const [titleData, setTitleData] = useState("");
  const [checkData, setCheckData] = useState<fillType[]>([]);
  //取消
  const onCancel = (e: any) => {
    if (e.target.className != "ant-modal-wrap") setCheckShow(false);
  };

  useImperativeHandle(ref, () => ({
    open(title: string, fill: fillType[]) {
      setCheckShow(true);
      setTitleData(title);
      setCheckData(fill);
    }
  }));
  return (
    <Modal open={checkShow} title={titleData} footer={false} onCancel={onCancel} width="50%">
      <Table dataSource={checkData} columns={columns} pagination={checkData.length <= 10 ? false : { pageSize: 10 }} rowKey="xh" bordered></Table>
    </Modal>
  );
});
